<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>#{title}</title>
        <link rel="stylesheet" type="text/css"
              href="#{resource['css:userWebSite.css']}" />
    </h:head>
    <h:body >
        <div class="header">
            <ui:insert name="header" >
                <p:growl showDetail="true" autoUpdate="false" showSummary="false" id="growl"/>
                <h:form >
                    <p:toolbar style="min-height: 50px; max-width:100%" id="toolbar">
                            <p:toolbarGroup align="left" >
                                <p:graphicImage value="/resources/images/onecommerce.png" height="70px"/> 
                            </p:toolbarGroup>                        
                        <p:toolbarGroup align="right" style="margin-top: 15px">
                            <h:panelGrid columns="5" width="300px" rendered="#{utilLogin.connected}" >                               
                                <h:outputLabel value="Bienvenue #{utilLogin.util.prenom}" style="margin-right: 100px"/>
                                <p:commandButton value="Panier" action="/user/userDetails?faces-redirect=true" rendered="#{!utilLogin.admin}"/>
                                <p:commandButton value="Acceuil" action="/user/editDetails?faces-redirect=true" rendered="#{!utilLogin.admin}"/>
                                <p:commandButton value="Acceuil" action="/pages/index?faces-redirect=true" rendered="#{utilLogin.admin}"/>                                
                                <p:commandButton value="Déconnecter" action="#{utilLogin.disconnect()}" /> 
                                <p:themeSwitcher style="width:165px" id="defaultSwitcher">  
                                    <f:selectItem itemLabel="Choose Theme" itemValue="" />  
                                    <f:selectItems value="#{themeSwitcherBean.themes}" />  
                                </p:themeSwitcher>
                            </h:panelGrid>
                            <h:panelGrid columns="3" width="200px" rendered="#{!utilLogin.connected}">
                                <p:commandButton id="loginBtn" value="Connecter" type="button" />  
                                <p:commandLink value="S'inscrire" action="/register.xhtml?faces-redirect=true"/>
                                <p:themeSwitcher style="width:165px">  
                                    <f:selectItem itemLabel="Choose Theme" itemValue="" />  
                                    <f:selectItems value="#{themeSwitcherBean.themes}" />  
                                </p:themeSwitcher>
                            </h:panelGrid>
                        </p:toolbarGroup>
                    </p:toolbar>
                    <p:overlayPanel id="loginPanel" for="loginBtn" hideEffect="fade" dynamic="true" widgetVar="loginPanel" >                          
                        <h:panelGrid columns="2"  >
                            <h:outputLabel id="login" value="Nom de l'utilisateur: "  /> 
                            <p:inputText  value="#{utilLogin.login}" required="true" requiredMessage="Nom de l'utilisateur requis"/>
                            <h:outputLabel id="pass" value="Mot de passe:" /> 
                            <p:password  value="#{utilLogin.password}" required="true" requiredMessage="Mot de passe requis"/>
                            <p:commandButton actionListener="#{utilLogin.connect()}" value="login" update="toolbar, content, growl" onsuccess="loginPanel.hide()"/>                            
                        </h:panelGrid>            
                    </p:overlayPanel>
                </h:form>

            </ui:insert>
        </div>
        <div class="slide">
            <ui:insert name="slide" />
        </div>
        <h:form id="form">
            <div class="content">
                <div class="menu">
                    <ui:insert name="menu" >
                        <p:layout  style="min-height: 100%; max-height: 100%">
                            <p:layoutUnit position="center"  >
                                <h:panelGrid columns="1">
                                    <p:panel header="Liste des catégories" style="max-width: 200px; min-width: 200px">
                                        <ui:repeat value="#{categoryController.items}" var="item" >
                                            <br/>
                                            <p:commandButton value="#{item.categorie}" style="min-width: 170px" action="#{menuController.goCategorie}"  >                                                
                                                <f:param name="categorie" value="#{item.categorie}" />                                                                                                
                                            </p:commandButton>                                            
                                            <br/>
                                        </ui:repeat>
                                        <br/>
                                        <p:commandLink value="Ajouter une catégorie" action="/pages/category/List.xhtml?faces-redirect=true" rendered="#{utilLogin.admin}"/>
                                    </p:panel>
<!--                                    <p:button outcome="/user/courbes.xhtml" value="BI" style="min-width: 200px"/>-->
                                    <h:panelGrid columns="1" > 
                                        <p:panel header="Top 5 produits" style="max-width: 200px;min-width: 200px">                                            
                                            <ui:repeat value="#{menuController.topFiveItems}" var="topFive" >
                                                <br/>
                                                <h:outputText value="#{topFive.nomitem}"/>
                                                <br/>
                                            </ui:repeat>
                                        </p:panel>
                                    </h:panelGrid>
                                    <h:panelGrid columns="1" > 
                                        <p:panel header="Bottom 5 produits" style="max-width: 200px;min-width: 200px " rendered="#{utilLogin.admin}">
                                            <ui:repeat value="#{menuController.bottomFiveItems}" var="bottomFive" >
                                                <br/>
                                                <h:outputText value="#{bottomFive.nomitem}" />
                                                <br/>
                                            </ui:repeat>
                                        </p:panel>
                                    </h:panelGrid>
                                    <h:panelGrid columns="1" > 
                                        <p:panel header="Notre client fidèle" style="max-width: 200px;min-width: 200px ">                                            
                                            <h:outputText value="#{menuController.clientFidele.nom}" />                                                
                                        </p:panel>
                                    </h:panelGrid>
                                </h:panelGrid>
                            </p:layoutUnit>
                        </p:layout>
                    </ui:insert>
                </div>
                <div class="contentBody" >
                    <ui:insert name="content" id="content">

                    </ui:insert>
                </div>
                <div style="clear: both;" />
            </div>
        </h:form>
        <div class="footer">
            <ui:insert name="footer" >
                <h:form >
                    <p:toolbar style="min-height: 50px;padding-right: 10px;padding-left: 10px" >
                        <p:toolbarGroup align="center" >
                            <br/>
                            <div align="center">
                                <h:outputText value="All Rights Reserved 2011/2012 " style="font-size: 10px" /> 
                                <br/>
                                <h:outputText value="MalMen Corporation " style="font-size: 10px" /> 
                            </div>
                        </p:toolbarGroup>                       
                    </p:toolbar>
                </h:form>
            </ui:insert>
        </div>
    </h:body>
</html>